/*
  @at-root <selecotr> {...}，会将所有内容都在文档的根处输出，而不是在选择器的位置输出。
*/


@use "sass:selector";

@mixin unify-parent($child) {
  @at-root  #{selector.unify(&, $child)} {
    @content;
  }
}

.wrapper .field  {
  @include unify-parent('input') {
    border: 1px solid blue;
  }

  @include unify-parent('select') {
    border: 1px solid red;
  }
}


// 单独使用 @at-root 会移除样式规则，但是使用 @media 或 @supports 会保留
@media print {
  .page {
    width: 8in;

    @at-root (without: media) {
      color: #111;
    }

    @at-root (with: rule) {
      font-size: 1.2em;
    }
  }
}